<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.title {
				height: 100px;
				width: 100%;
				background-color: white;
			}
			
			.title img {
				margin-left: 150px;
			}
			
			.main {
				height: 588px;
				width: 100%;
				background-color: #14212A;
			}
			
			.cent {
				height: 588px;
				width: 1130px;
				border: 1px solid;
				margin-left: 150px;
				background-image: url(img/banner.jpg);
			}
			
			.login {
				height: 524px;
				width: 400px;
				margin: 30px 0 30px auto;
				background-color: white;
				position: relative;
			}
			
			
			.d1 {
				width: 400px;
				height: 55px;
				font-size: 24px;
				text-align: center;
				color: #757575;
				font-family: "微软雅黑";
				padding-top: 27px;
			}
			
			.zhanghao {
				padding-left: 50px;
				display: inline-block;
				cursor: pointer;
				color: #F56600;
				/*border: 1px solid;*/
			}
			.zhanghao:hover{
				color: #F56600;
			}
			
			.d1 img {
				height: 25px;
				/*border: 1px solid;*/
				margin-bottom: 1px;
			}
			
			.d1 a {
				display: inline-block;
				/*border: 1px solid;*/
				padding-left: 25px;
				padding-right: 30px;
			}
			
			.saoma {
				padding-right: 50px;
				display: inline-block;
				/*border: 1px solid;*/
				cursor: pointer;
				
			}
			.saoma:hover{
				color: #F56600;
			}
			
			.wenben {
				height: 50px;
				width: 338px;
				border: 1px solid #E0E0E0;
				margin-top: 10px;
				margin-left: 33px;
			}
			
			.denglu {
				height: 50px;
				width: 338px;
				/*border: 1px solid;*/
				margin-top: 27px;
				margin-left: 33px;
				background-color: #F56600;
				text-align: center;
				font-size: 18px;
				cursor: pointer;
				line-height: 50px;
			}
			
			.denglu a {
				color: white;
				text-decoration: none;
			}
			
			.small {
				height: 19px;
				width: 400px;
				/*border: 1px solid;*/
				margin-top: 20px;
				text-align: center;
				font-size: 14px;
				color: #999;
			}
			
			.small a {
				color: #999;
				text-decoration: none;
			}
			
			.xian {
				height: 19px;
				width: 338px;
				margin-left: 33px;
				margin-top: 110px;
				/*border: 1px solid;*/
				color: #BBBBBB;
				text-align: center;
				font-size: 14px;
			}
			
			.xian span {
				display: inline-block;
				border: 0.5px solid;
				width: 120px;
				vertical-align: middle;
			}
			
			.shejiao {
				height: 36px;
				width: 338px;
				margin-left: 33px;
				margin-top: 5px;
				/*border: 1px solid;*/
			}
			
			.shejiao a {
				display: inline-block;
				width: 30px;
				height: 30px;
				margin-left: 40px;
			}
			
			.qq {
				background-image: url(img/qq.png);
			}
			
			.wei {
				background-image: url(img/wei.png);
			}
			
			.zhi {
				background-image: url(img/zhi.png);
			}
			
			.xin {
				background-image: url(img/xin.png);
			}
			
			.qq:hover {
				background-image: url(img/qq2.png);
			}
			
			.wei:hover {
				background-image: url(img/wei2.png);
			}
			
			.zhi:hover {
				background-image: url(img/zhi2.png);
			}
			
			.xin:hover {
				background-image: url(img/xin2.png);
			}
			
			.second{
				height: 440px;
				width: 400px;
				text-align: center;
				position: absolute;
				top: 80px;
				/*border: 1px solid red;*/
				background-color: white ;
				display: none;
			}
			
			.er{
				margin-top: 80px;
				margin-bottom: 20px;
			}
			.second p{
				font-size: 14px;
				color: #757575;
			}
			.second span{
				color: #F56600;
			}
			.foot {
				width: 100%;
				height: 150px;
				/*border: 1px solid blue;*/
			}
			.wenben{
				text-align: center;

			}
			.wenben input{
				border: 0px;
				width: 300px;
				margin-top: 15px;
				font-size: 14px;
				height: 20px;
				outline-style: none;
			}
		</style>
	</head>

	<body>
		<div class="title">
			<img src="img/mistore_logo.png" />
		</div>
		<div class="main">
			<div class="cent">
				<div class="login">
					<div class="d1">
						<span class="zhanghao"   onclick="hui(this)">账号登录</span>
						<a><img src="img/shu.png" /></a>
						<span class="saoma"   onclick="bian(this)">扫码登录</span>
					</div>
					<div class="first">
						<div class="wenben"><input type="text" name="" id="" value="" placeholder="邮箱/手机号码/小米账号" /></div>
						<div class="wenben"><input type="password" name="" id="" value=""placeholder="密码" /></div>
						<div class="denglu">
							<a href="">立即登录</a>
						</div>
						<div class="small">
							<a href="">注册小米账号</a>
							<span>|</span>
							<a href="">忘记密码？</a>
						</div>
						<div class="xian">
							<span></span>其他方式登录 <span></span>
						</div>
						<div class="shejiao">
							<a href="" class="qq"></a>
							<a href="" class="wei"></a>
							<a href="" class="zhi"></a>
							<a href="" class="xin"></a>
						</div>
						</div>
						
						<div class="second">
							<div class="er"><img src="img/二维码.png"/></div>
							<p>使用 <span> 小米商城APP  </span> 扫一扫</p>
							<p>请打开「设置 > 小米帐号 > 右上角扫一扫」扫码登录</p>
						</div>
						
					</div>
				</div>
			</div>
			<div class="foot">

			</div>
			
			<script type="text/javascript">
				function bian(t){
					t.parentNode.parentNode.children[2].style.display="block";
					t.style.color="#F56600";
					t.parentNode.children[0].style.color="#757575";
					t.parentNode.children[0].className.hover.color="#F56600";
					
					
				}
				function hui(t){
					t.parentNode.parentNode.children[2].style.display="none";
					t.parentNode.children[2].style.color="#757575";
					t.style.color="#F56600";
					
				}
			</script>
	</body>

</html>